<template>
  <RangePicker v-model:value="value"></RangePicker>
</template>
<script setup lang="ts">
import { RangePicker } from 'ant-design-vue';
import dayjs, { Dayjs } from 'dayjs';

import { ref, watch } from 'vue';
const model = defineModel<[string, string]>('value');
const value = ref<[Dayjs, Dayjs]>();
const format = 'YYYY-MM-DD';
watch(model, () => {
  if (Array.isArray(model.value) && Array.isArray(value.value)) {
    if (
      model.value[0] != value.value[0].format(format) ||
      model.value[1] != value.value[1].format(format)
    ) {
      // @ts-ignore
      value.value = [dayjs[model.value[0]], dayjs[model.value[1]]];
    }
  } else if (model.value == null) {
    value.value = undefined;
  }
});
watch(value, (v) => {
  if (v) {
    model.value = [v[0].format(format), v[1].format(format)];
  } else {
    model.value = undefined;
  }
});
</script>
<style module lang="scss"></style>
